<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form ref="formData" :model="formData" label-width="80px">
      <el-row>
        <el-col :span="3">
          <el-form-item label="课程名称" prop="lession_name">
            <el-select v-model="formData.lession_name" filterable placeholder="全部">
              <el-option v-for="(item, index) in courseList11" :key="index" :label="item.lession_name" :value="item.lession_name" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4">
          <el-form-item label="教材名称">
            <el-select v-model="formData.textbook_name" filterable placeholder="全部">
              <el-option v-for="(item,index) in textbookList" :key="index" :label="item.textbook_name" :value="item.textbook_name" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="4">
          <el-form-item label="使用年级" prop="grade">
            <el-select v-model="formData.grade" filterable placeholder="全部">
              <el-option v-for="(item,index) in grade" :key="index" :label="item" :value="index+1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="课程类型" prop="lession_type">
            <el-select v-model="formData.lession_type" filterable placeholder="全部">
              <el-option label="线上课程" value="1" />
              <el-option label="线下课程" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="创建日期" prop="create_time">
            <div class="block">
              <!-- <el-date-picker v-model="formData.create_time" style="width: 250px;" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" /> -->
              <el-date-picker
                v-model="formData.create_time"
                style="width: 250px;"
                type="date"
                align="right"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="queryCoursesData()">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 头部导航栏区域 -->
    <div class="headerDIv">
      <div class="headerDIv1">
        <div><el-button icon="el-icon-refresh" plain type="primary" :disabled="is_delete==0?false:true" @click="allCourse" /></div>
        <div><el-button plain type="primary" :disabled="is_delete==0?false:true" @click="onlineCourse">线上课程</el-button></div>
        <div><el-button plain type="primary" :disabled="is_delete==0?false:true" @click="offlineCourse">线下课程</el-button></div>
      </div>
      <div class="headerDIv2">
        <div><el-button type="success" plain :disabled="is_delete==0?false:true" @click="addCourses">新建课程</el-button></div>
        <div><el-button type="primary" plain @click="allCourse">主页课程</el-button></div>
        <div><el-button type="danger" plain @click="checkRecycle">回收站</el-button></div>
      </div>
    </div>
    <!-- 主体表格区域 -->
    <tableModule
      v-if="col.length > 0 && this.lession_type=='' && this.is_delete==0 && this.isQuery==false"
      ref="tableRef"
      :table-data="courseList"
      :cols="col"
      :handle-data="handleData"
      :total="total"
      :page-number="page"
      @handleFunc="handleFunc"
      @getList="getCourseList"
    />
    <!-- 线上表格区域 -->
    <tableModule
      v-if="col.length > 0 && this.lession_type==1 && this.is_delete==0 && this.isQuery==false"
      ref="tableRef"
      :table-data="onlineCourseList"
      :cols="col"
      :handle-data="handleData"
      :total="total1"
      :page-number="queryOnlineCource.page"
      @handleFunc="handleFunc"
      @getList="getCourseList1"
    />
    <!-- 线下表格区域 -->
    <tableModule
      v-if="col.length > 0 && this.lession_type==2 && this.is_delete==0 && this.isQuery==false"
      ref="tableRef"
      :table-data="offlineCourseList"
      :cols="col"
      :handle-data="handleData"
      :total="total2"
      :page-number="queryOfflineCource.page"
      @handleFunc="handleFunc"
      @getList="getCourseList2"
    />
    <!-- 数据查询表格 -->
    <tableModule
      v-if="col.length > 0 && this.isQuery==true"
      ref="tableRef"
      :handle-data="is_delete==0?handleData: handleData1"
      :table-data="quetyCourseList"
      :cols="col"
      :total="quetyCourseTotal"
      :page-number="quetyCoursePage"
      @handleFunc="handleFunc"
      @getList="getQuetyCourseList"
    />
    <!-- 回收站表格 -->
    <tableModule
      v-if="col.length > 0 && this.is_delete==1 && this.isQuery==false"
      ref="tableRef"
      :table-data="recycleList"
      :cols="col"
      :handle-data="handleData1"
      :total="recycTotal"
      :page-number="recycPage"
      @handleFunc="handleFunc"
      @getList="getrecycleTable"
    />
    <!-- 新建&编辑课程对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" width="52%" @close="handleClose">
      <dialog-label ref="dialogRef" :content="tabCont" :dialog-show="isShowDialog" :footer-status="footerStatus" :edit-i-d="editID" @close="handleClose" @Refresh="getCourseList" />
    </el-dialog>
    <!-- 查看课程对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="isCheck" widtrecoverh="52%" @close="handleClose">
      <dialog-label ref="dialogRef" :content="tabCont" :dialog-show="isCheck" :footer-status="footerStatus1" @close="handleClose" @Refresh="getCourseList" @handle="handle" />
    </el-dialog>
  </div>
</template>

<script>

import {
    searchCourse,
    // searchJiaocaiID,
    deleteCourseById,
    recoverCourseByID

} from '@/api/kecheng.js'
// searchCourseById
import tableModule from '@/components/table/table.vue'
import dialogLabel from '@/components/creatCourse/createCourse.vue'

export default {
    components: {
        tableModule,
        dialogLabel
    },
    data() {
        return {
            isQuery: false,
            lession_type: '',
            is_delete: 0,
            courseList11: [], // 课程列表所有数据--不分页
            courseList: [], // 课程列表--主页表格数据
            onlineCourseList: [], // 线上课程列表
            offlineCourseList: [], // 线下课程列表
            quetyCourseList: [], // 查询数据列表
            recycleList: [], // 回收站表格数据
            // textbookList: [], // 教材列表
            col: [], // 表格列数据
            page: 1, // 当前页数
            limit: 10, // 当前页条目个数
            total: 0, // 表格数据总条数
            total1: 0, // 线上表格数据总条数
            total2: 0, // 线下表格数据总条数
            recycPage: 1, // 回收站当前页数
            recycLimit: 10, // 回收站当前页条目个数
            recycTotal: 0, // 回收站表格数据总条数
            tabIndex: 0, // 当前表格行索引
            tabCont: {}, // 当前表格行数据
            handleData: ['edit', 'delete'], // 表格操作按钮
            handleData1: ['check', 'recover'], // 表格操作按钮
            footerStatus: ['reset', 'submit'], // 对话框底部显示
            footerStatus1: ['close'],
            dialogTitle: '', // 对话框标题
            isShowDialog: false, // 是否显示新建&编辑课程模块
            isCheck: false, // 是否显示查看对话框
            formData: {
                lession_name: '',
                // textbook_name: '',
                grade: '',
                lession_type: '',
                create_time: ''
            }, // 顶部查询输入框
            queryOnlineCource: {
                page: 1,
                limit: 10,
                is_delete: 0,
                lession_type: 1
            }, // 查询线上课程数据
            queryOfflineCource: {
                page: 1,
                limit: 10,
                is_delete: 0,
                lession_type: 2
            }, // 查询线下课程数据
            quetyCoursePage: 1,
            quetyCourseLimit: 10,
            quetyCourseTotal: 0, // 查询数据
            deleteCourseInfo: {
                unid: ''
            },
            editID: '',
            grade: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三', '高一', '高二', '高三']

        }
    },
    created() {
        this.getCourseList()
        this.getCourseList1()
        this.getCourseList2()
        this.getQuetyCourseList()
        this.getTableCol()
        this.getCourseList11()
        // this.getTextbookList()
    },
    methods: {
        // 条件查询
        queryCoursesData() {
            if (this.formData.lession_name === '' && this.formData.textbook_name === '' && this.formData.grade === '' && this.formData.create_time === '' && this.formData.lession_type === '') {
                this.$message.error('请输入要查询的条件！')
            } else {
                this.isQuery = true
                this.getQuetyCourseList()
            }
        },
        // 课程管理主页表格数据处理
        getTableCol() {
            this.col = [
                {
                    propName: 'lession_type',
                    label: '课程类型'
                },
                {
                    propName: 'lession_num',
                    label: '课程编号'
                },
                {
                    propName: 'lession_name',
                    label: '课程名称'
                },
                {
                    propName: 'grade',
                    label: '年级'
                },
                {
                    propName: 'teacher_name',
                    label: '任课老师'
                },
                {
                    propName: 'is_free',
                    label: '是否免费'
                },
                {
                    propName: 'is_custom',
                    label: '可否自定义课时'
                },
                {
                    propName: 'lession_time',
                    label: '课时'
                },
                {
                    propName: 'createor_name',
                    label: '创建人'
                },
                {
                    propName: 'create_time',
                    label: '创建时间'
                },
                {
                    propName: 'update_time',
                    label: '最后修改时间'
                }

            ]
        },
        handle(type) {
            if (type == 'close') {
                this.isCheck = false
            }
        },
        // 表格按钮操作事件
        handleFunc(event) {
            this.tabIndex = event.$index // 当前选中行索引
            // 由于Object 是引用类型，浅拷贝是引用类型，这里需要进行深度拷贝，深度拷贝是实体
            this.tabCont = JSON.parse(JSON.stringify(event.row)) // 当前选中行数据
            if (this.tabCont.lession_type == 2) {
                this.tabCont.lession_type = '线下课程'
            } else {
                this.tabCont.lession_type = '线上课程'
            }
            if (event.buttonType == 'delete') { // 删除
                this.deleteCourseById()
            } else if (event.buttonType == 'edit') { // 编辑
                this.isShowDialog = true
                this.editID = event.row.unid
                this.dialogTitle = '编辑课程'
            } else if (event.buttonType == 'check') { // 查看
                this.isCheck = true
                this.dialogTitle = '查看课程'
            } else { // 恢复
                this.recoverCourse()
            }
        },

        // 删除课程ByID
        deleteCourseById() {
            var data = {
                content: '选中的内容删除后将无法恢复，请问是否删除？'
            }
            this.$confirm(data.content, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.deleteCourseInfo.unid = this.tabCont.unid
                var resData = await deleteCourseById(this.deleteCourseInfo)
                if (resData.code !== 200) return
                this.$message.success('删除课程成功')
                this.getCourseList()
                this.getCourseList1()
                this.getCourseList2()
                this.getQuetyCourseList()
                this.getrecycleTable()
            }).catch(() => {
                this.$message.info('已取消删除')
            })
        },
        // 恢复课程信息ByID
        async recoverCourse() {
            var recoverData = {
                content: '此操作将恢复该课程，是否继续？'
            }
            this.$confirm(recoverData.content, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async() => {
                this.deleteCourseInfo.unid = this.tabCont.unid
                var resData = await recoverCourseByID(this.deleteCourseInfo)
                if (resData.code !== 200) return
                this.$message.success('恢复课程成功')
                this.getCourseList()
                this.getCourseList1()
                this.getCourseList2()
                this.getQuetyCourseList()
                this.getrecycleTable()
            }).catch(() => {
                this.$message.info('已取消恢复')
            })
        },

        // 点击全部课程按钮
        allCourse() {
            this.isQuery = false
            this.lession_type = ''
            this.is_delete = 0
            this.refresh()
        },
        // 点击线上课程按钮
        onlineCourse() {
            this.isQuery = false
            this.lession_type = 1
            this.refresh()
        },
        // 点击线下课程按钮
        offlineCourse() {
            this.isQuery = false
            this.lession_type = 2
            this.refresh()
        },
        // 查看回收站
        checkRecycle() {
            this.is_delete = 1
            this.getrecycleTable()
        },
        // 新建课程
        addCourses() {
            this.editID = ''
            this.isShowDialog = true
            this.dialogTitle = '新建课程'
        },
        // 获取课程
        async getCourseList(e) {
            if (e && e.page) { this.page = e.page }
            if (e && e.limit) { this.limit = e.limit }
            var data = {
                page: this.page,
                limit: this.limit,
                is_delete: 0
            }
            var courseData = await searchCourse(data)
            if (courseData.code !== 200) return
            this.courseList = courseData.data.list
            this.total = courseData.data.total
        },
        // 课程列表所有数据
        async getCourseList11() {
            let queryInfo = {}
            var courseData = await searchCourse(queryInfo)
            if (courseData.code !== 200) return
            this.courseList11 = courseData.data.list
        },

        // 获取线上课程
        async getCourseList1(e) {
            if (e && e.page) {
                this.queryOnlineCource.page = e.page
            }
            if (e && e.limit) {
                this.queryOnlineCource.limit = e.limit
            }
            var courseData1 = await searchCourse(this.queryOnlineCource)
            if (courseData1.code != 200) return
            else {
                this.total1 = courseData1.data.total
                this.onlineCourseList = courseData1.data.list
            }
        },
        // 获取线下课程
        async getCourseList2(e) {
            if (e && e.page) {
                this.queryOfflineCource.page = e.page
            }
            if (e && e.limit) {
                this.queryOfflineCource.limit = e.limit
            }
            var courseData2 = await searchCourse(this.queryOfflineCource)
            if (courseData2.code != 200) return
            else {
                this.total2 = courseData2.data.total
                this.offlineCourseList = courseData2.data.list
            }
        },
        // 获取查询课程数据
        getQuetyCourseList(e) {
            if (e && e.page) {
                this.quetyCoursePage = e.page
            }
            if (e && e.limit) {
                this.quetyCourseLimit = e.limit
            }
            var queryData = {
                lession_name: this.formData.lession_name,
                // textbook_name: this.formData.textbook_name,
                grade: this.formData.grade,
                lession_type: this.formData.lession_type,
                create_time: this.formData.create_time,
                page: this.quetyCoursePage,
                limit: this.quetyCourseLimit,
                is_delete: this.is_delete
            }
            searchCourse(queryData).then(rs => {
                if (rs.code == 200) {
                    this.quetyCourseTotal = rs.data.total
                    this.quetyCourseList = rs.data.list
                    // this.$refs.formData.resetFields()
                }
            })
        },
        // 查询回收站课程列表
        async getrecycleTable(e) {
            if (e && e.page) {
                this.recycPage = e.page
            }
            if (e && e.limit) {
                this.recycLimit.limit = e.limit
            }
            let recyclData = {
                page: this.recycPage,
                limit: this.recycLimit,
                is_delete: 1
            }
            var resData = await searchCourse(recyclData)
            if (resData.code !== 200) return
            this.recycTotal = resData.data.total
            this.recycleList = resData.data.list
        },

        // 清空顶部查询输入框的内容
        resetForm() {
            this.$refs.formData.resetFields()
            this.$message.success('重置成功！')
            this.refresh()
        },
        // 关闭标签Dialog处理
        handleClose() {
            this.tabIndex = 0
            this.tabCont = {}
            this.isShowDialog = false
        },
        // 刷新事件
        refresh() {
            this.$refs.tableRef.handleCurrentChange(1)
        }
        // 获取教材
        // async getTextbookList() {
        //     let queryInfo = {}
        //     var textbookData = await searchJiaocaiID(queryInfo)
        //     if (textbookData.code !== 200) return
        //     this.textbookList = textbookData.data.list
        // },

    }
}
</script>

<style scoped lang="scss">
.headerDIv {
  margin-bottom: 12px;
  display: flex;

  .headerDIv1 {
    display: flex;
    width: 100%;

    :nth-child(2) {
      margin-left: 12px;
    }

    :nth-child(3) {
      margin-left: 12px;
    }

    :nth-child(4) {
      margin-left: 12px;
    }
  }

  .headerDIv2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;

    :nth-child(1) {
      margin-right: 10px;
    }
    :nth-child(2) {
      margin-right: 10px;
    }

  }
}
</style>
